<template>
  <div class="manual-selected-rows" @click="() => show = true">
    已选 <span style="color: var(--van-primary-color)">{{ selectedRows.length }}</span> 条
    <van-icon name="arrow"/>
  </div>

  <HPopup v-model:show="show" :title="`选择${tempDataSource?.length}条`" class="manual-selected-rows-modal">
    <VerticalLayout>
      <div class="manual-selected-rows-modal-body">
        <ManualSelectedRowList
            ref="refManualSelectedRowList"
            :fields="fields"
            :formDefinition="formDefinition"
            :manualConfig="manualConfig"
            :dataSource="tempDataSource"/>
      </div>
      <template #footer>
        <div class="relation-form-list-footer manual-selected-rows-modal-footer">
          <div style="flex: 0.3">
            <van-button type="danger" style="width: 100%" round @click="clear">清空</van-button>
          </div>
          <div style="flex: 0.3">
            <van-button style="width: 100%" round @click="close">关闭</van-button>
          </div>
          <div style="flex: 0.3">
            <van-button style="width: 100%" type="primary" round @click="handleOK">确定</van-button>
          </div>
        </div>
      </template>
    </VerticalLayout>
  </HPopup>
</template>
<script setup>
import {closePopup, createProps} from '@/utils';
import HPopup from '@comp/HPopup/HPopup.vue';
import {nextTick, ref, shallowRef, watch} from 'vue';
import VerticalLayout from '@comp/Layout/VerticalLayout.vue';
import ManualSelectedRowList from '@comp/FormEngine/field/relation/RelationFormList/ManualSelectedRowList.vue';

defineOptions({name: 'ManualSelectedRows'});
const show = shallowRef(false);
const emits = defineEmits(['ok']);
const refManualSelectedRowList = shallowRef();
const props = defineProps({
  fields: createProps(Array, () => []),
  selectedRows: createProps(Array, () => []),
  formDefinition: createProps(Object, () => undefined),
  manualConfig: createProps(Object, () => undefined),
});
const tempDataSource = ref();

watch(() => show.value, (newVal, oldVal) => {
  nextTick(() => {
    if (show.value) {
      // 窗口打开了
      tempDataSource.value = [...props.selectedRows];
      nextTick(() => {
        refManualSelectedRowList.value.init()
      })
    }
  });
}, {
  immediate: true,
});

function close() {
  closePopup();
}

function clear() {
  emits('ok', []);
  close();
}

function handleOK() {
  emits('ok', tempDataSource.value);
  close();
}
</script>
<style lang="less">
.manual-selected-rows {
  background: #f0f4f7;
  text-align: center;
  padding: 10px;
}

.manual-selected-rows-modal {
  border-radius: 0 !important;
  height: 100vh !important;
  min-height: 100vh !important;
}

.manual-selected-rows-modal .van-action-sheet__header {
  box-shadow: 0 0 5px #e3e5e4;
  z-index: 10000;
}

.manual-selected-rows-modal-footer {
  background: white;
  border-top: 1px solid #f0f4f7;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 5px 0;
}

.manual-selected-rows-modal-body {
  background: #f0f4f7;
  height: 100%;
  overflow: auto;
}
</style>